<script setup>
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';

const store = useStore();
const route = useRoute();

const breadcrumb = computed(() => {
  return route.matched
    .map((item) => item.name !== '分类' ?
      { ...item, breadcrumbName: item.name } :
      { ...item, breadcrumbName: store.state.home.category.find((c) => route.params.id === c.id)?.name },
    );
});
</script>

<template>
  <div>分类页面:{{ route.params.id }}</div>
  <el-breadcrumb separator=">">
    <el-breadcrumb-item v-for="item in breadcrumb" :key="item.name" :to="item">
      {{ item.breadcrumbName }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>
